<template>
    <div class="dropinbox">
        <div class="container">
            <!-- 左边部分内容 -->
            <div class="content_l1000">
                <div class="text_l110">
                    <span class="textl113">已投递简历状态</span>
                    <button class="btn_r111">
                        <img src="../assets/471.svg" class="image_l112">
                        刷新
                    </button>
                </div>
                <!-- 状态选择栏 -->
                <div class="text_r1114">
                    <button class="btn_r114">投递成功</button>
                    <button class="btn_r114 text_border">被查看</button>
                    <button class="btn_r114 text_border">待沟通</button>
                    <button class="btn_r114 text_border">邀请面试</button>
                    <button class="btn_r114 text_border">不合适</button>
                </div>
                <!-- 投递成功的信息列表 -->
                <div class="content_l2000">
                    <div class="text_l2200" v-for="delivery in deliveryBox.slice(0,6)">
                        <div class="text_padding">
                            <span class="text_l2202">{{ delivery.post }}</span>
                            <span class="text_l2203 textfont_14">({{ delivery.salary }})</span>
                        </div>
                        <div class="text_padding">
                            <span class="textfont_14">{{ delivery.company }}</span>
                            <span class="textfont_14 textcolor_gray">[{{ delivery.area }}]</span>
                        </div>
                        <div class="text_l2400 text_padding">
                            <div>
                                <span class="textfont_14 textcolor_gray">使用简历：</span>
                                <span class="textfont_14">{{ delivery.resume }}</span>
                            </div>
                            <div>
                                <span class="textfont_14 textcolor_gray">{{ delivery.dataTime }}</span>
                                <button class="btn_l2400 textfont_14">投递成功</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右边部分内容 -->
            <div class="conten_r1000">
                    <div class="header_r1100">
                        <button class="text_r1111">
                            <img src="../assets/459.svg" class="imageset">
                            <span class="textfont_12 fontcolor_128">投递箱</span>
                        </button>
                        <button class="text_r1111">
                            <img src="../assets/459.svg" class="imageset">
                            <span class="textfont_12 fontcolor_128">邀请函</span>
                        </button>
                        <button class="text_r1111">
                            <img src="../assets/459.svg" class="imageset">
                            <span class="textfont_12 fontcolor_128">收藏夹</span>
                        </button>
                        <button class="text_r1111">
                            <img src="../assets/459.svg" class="imageset">
                            <span class="textfont_12 fontcolor_128">订阅栏</span>
                        </button>
                    </div>
                <!-- 猜你喜欢内容 -->
                <div class="center_r1200">
                    <div class="textfont_14 fontcolor text_r1210"><span class="text_r1211">猜你喜欢</span></div>
                    <div class="text_r1212" v-for="value in likeLists.slice(0,5)">
                        <img src="../assets/818.jpg" class="image_r1212">
                        <div class="text_r1214">
                            <span class="textfont_14 fontcolor text_padding">{{ value.post }}</span>
                            <span class="textcolor_255 text_padding">{{ value.salary }}</span>
                            <div class="text_padding text_r12204">
                                <span class="textfont_14 textcolor_gray">{{ value.company }}</span>
                                <span class="textfont_14 textcolor_gray">[{{ value.area }}]</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 查看更多 -->
                <div class="foot_r1300">
                    <button class="textfont_14 fontcolor btn_r1300">
                        <span>查看更多相似职位</span>
                        <img src="../assets/75.svg" class="image_r1301">
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import "@/assets/css/global.css"

export default{
    name:'DropInBox',
    data(){
        return{
            deliveryBox:[
                {post:"C++",salary:'14k-24k',company:'Travel-X',area:'北京',resume:'在线简历',dataTime:'2018/10/2 14:17:40'},
                {post:"Java",salary:'14k-24k',company:'Travel-X',area:'北京',resume:'在线简历',dataTime:'2018/10/2 14:17:40'},
                {post:"UI",salary:'14k-24k',company:'Travel-X',area:'北京',resume:'在线简历',dataTime:'2018/10/2 14:17:40'},
                {post:"PHP",salary:'14k-24k',company:'Travel-X',area:'北京',resume:'在线简历',dataTime:'2018/10/2 14:17:40'},
                {post:"PHP",salary:'14k-24k',company:'Travel-X',area:'北京',resume:'在线简历',dataTime:'2018/10/2 14:17:40'},
                {post:"PHP",salary:'14k-24k',company:'Travel-X',area:'北京',resume:'在线简历',dataTime:'2018/10/2 14:17:40'},
            ],
            likeLists:[
                {post:'产品总监',salary:'14k-24k',company:'蓝墨科技',area:'北京'},
                {post:'产品总监',salary:'14k-24k',company:'蓝墨科技',area:'北京'},
                {post:'产品总监',salary:'14k-24k',company:'蓝墨科技',area:'北京'},
                {post:'产品总监',salary:'14k-24k',company:'蓝墨科技',area:'北京'},
                {post:'产品总监',salary:'14k-24k',company:'蓝墨科技',area:'北京'},
            ],
        }
    }
}
</script>
 
<style scoped>

    .container{
        margin-top: 120px;
        margin-left: 200px;
        margin-bottom: 40px;
        display: flex;
    }

    .content_l1000{
        padding-top: 20px;
        width: 700px;
        background-color: rgba(245, 245, 245, 1);
        border: rgba(229, 229, 229, 1) solid 1px;
        border-radius: 4px;
    }

    .text_l110{
        padding: 0px 25px;
        padding-bottom: 10px;
        display: flex;
        justify-content: space-between;
        border-bottom: rgba(229, 229, 229, 1) solid 1.5px;
    }

    .textl113{
        margin-left: 10px;
        font-size: 18px;

    }

    .btn_r111{
        font-size: 14px;
        display: flex;
        align-items: center;
        border: none;
        background-color: transparent;
        cursor: pointer;
    }

    .image_l112{
        height: 24px;
        margin-right: 4px;
    }

    .text_r1114{
        margin-top: 24px;
        padding: 2px 0px;
        display: flex;
        border: rgba(229, 229, 229, 1) solid 1.5px;
        background-color: rgba(231, 231, 231, 1);

    }

    .btn_r114{
        font-size: 14px;
        color: rgba(128, 128, 128, 1);
        padding: 5px 15px;
        border: none;
        background-color: transparent;
        border-bottom: rgba(231, 231, 231, 1) solid 4px;
        cursor: pointer;
    }

    .text_border{
        border-left: rgba(166, 166, 166, 1) solid 1px;
    }

    .btn_r114:hover{
        border-bottom: rgba(0, 178, 139, 1) solid 4px;
        color: rgba(0, 178, 139, 1);
    }

    .content_l2000{
        margin-top: 20px;
    }

    .text_l2200{
        margin-top: 10px;
        padding: 15px 10px;
        border: rgba(229, 229, 229, 1) solid 1px;
        border-left: rgba(0, 178, 139, 1) solid 5px;
    }

    .text_padding {
        padding: 2px 0px;
    }

    .text_l2202{
        font-size: 16px;
        color: rgba(0, 178, 139, 1);
    }

    .textfont_14{
        font-size: 14px;
    }

    .fontcolor{
        color: rgba(80, 80, 80, 1);
    }

    .fontcolor_128{
        color: rgba(128, 128, 128, 1);
    }

    .textcolor_gray{
        color: rgba(166, 166, 166, 1);
    }

    .text_l2203{
        margin-left: 10px;
        color: rgba(255, 105, 26, 1);
    }

    .textcolor_255{
       color: rgba(255, 105, 26, 1);
    }

    .text_l2400{
        display: flex;
        justify-content: space-between;
    }

    .btn_l2400{
        margin-left: 10px;
        border: none;
        background-color: transparent;
    }

    .conten_r1000{
        width: 300px;
        height: 400px;
        margin-left: 90px;
    }

    .header_r1100{
        display: flex;
        justify-content: space-between;
    }

    .text_r1111{
        padding: 5px;
        width: 50px;
        border-radius: 4px;
        border: none;
        background-color: rgba(246, 245, 245, 1);
        display: flex;
        flex-direction: column;
        cursor: pointer;
    }

    .imageset{
        height: 24px;
    }
    
    .textfont_12{
        font-size: 12px;
    }

    .center_r1200{
        margin-top: 20px;
    }

    .text_r1210{
        border-bottom: rgba(153, 153, 153, 1) solid 1px;
        padding-bottom: 7px;
    }

    .text_r1211{
        padding: 5px;
        border-bottom: rgba(0, 178, 139, 1) solid 3px;
    }

    .text_r1212{
        padding: 12px 6px;
        border-bottom: rgba(128, 128, 128, 1) dashed 1px;
        display: flex;
    }

    .image_r1212{
        height: 60px;
    }

    .text_r1214{
        margin-left: 8px;
        display: flex;
        flex: 1;
        flex-direction: column;
    }

    .text_r12204{
        display: flex;
        justify-content: space-between;
    }

    .foot_r1300{
        margin-top: 30px;
        display: flex;
        justify-content: center;
    }

    .image_r1301{
        height: 30px;
    }

    .btn_r1300{
        border: none;
        background-color: transparent;
        display: flex;
        align-items: center;
    }

</style>